@import 'settings';

// CSS grid implementation of columns for all screens sizes
@mixin vf-grid-8-column($col) {
  @supports (display: grid) {
    grid-column-end: span #{$col};

    //nesting
    @if $col > 1 {
      & .grid-row {
        grid-template-columns: repeat($col, minmax(0, 1fr));
      }
    }
  }
}

@mixin vf-grid-8-column-reordering($label, $col-count, $reset: false) {
  @for $i from 1 through $col-count {
    .grid-row [class*='#{$grid-8-column-prefix}'].#{$grid-8-column-prefix}start-#{$label}-#{$i} {
      @if $reset {
        grid-column-start: initial;
      } @else {
        grid-column-start: #{$i};
      }
    }

    .#{$grid-8-column-prefix}order-#{$label}-#{$i} {
      @if $reset {
        order: initial;
      } @else {
        order: #{$i};
      }
    }
  }
}

@mixin vf-p-grid-8 {
  // FIXME: this should be removed from framework SCSS
  // (see https://github.com/canonical/vanilla-framework/issues/3199)
  .grid-demo .grid-col,
  .grid-demo [class*='#{$grid-8-column-prefix}'] {
    background: $colors--theme--background-negative-default;
    margin-bottom: $spv--small;
  }

  .grid-row {
    @extend %vf-grid-row;
  }

  // mobile grid

  // by default medium and large screen col classes should span full width on mobile (to match block level element behaviour)
  %grid-8-span-on-mobile {
    grid-column: auto / span $grid-8-columns-small;
  }

  @for $i from 1 through $grid-8-columns-medium {
    .#{$grid-8-medium-col-prefix}#{$i} {
      @extend %grid-8-span-on-mobile;
      @extend %display-block;
    }
  }

  @for $i from 1 through $grid-8-columns {
    .#{$grid-8-large-col-prefix}#{$i} {
      @extend %grid-8-span-on-mobile;
      @extend %display-block;
    }
  }

  // col-small-X classes define grid for small screen
  @for $i from $grid-8-columns-small through 1 {
    .#{$grid-8-small-col-prefix}#{$i} {
      @extend %display-block;
      @include vf-grid-8-column($i);

      width: 100%;
    }
  }

  // tablet grid

  // on medium/tablet screens, small and large grid class names span full width (to match block level element behaviour)
  %grid-8-span-on-tablet {
    @media (min-width: $threshold-4-small-4-med-col) {
      grid-column: auto / span $grid-8-columns-medium;
    }
  }

  @for $i from 1 through $grid-8-columns-small {
    .#{$grid-8-small-col-prefix}#{$i} {
      @extend %grid-8-span-on-tablet;
    }
  }

  @for $i from 1 through $grid-8-columns {
    .#{$grid-8-large-col-prefix}#{$i} {
      @extend %grid-8-span-on-tablet;
    }
  }

  // col-medium-X classes define grid for medium screens
  @media (min-width: $threshold-4-small-4-med-col) {
    @for $i from $grid-8-columns-medium through 1 {
      .#{$grid-8-medium-col-prefix}#{$i} {
        @include vf-grid-8-column($i);

        width: 100%;
      }
    }
  }

  // desktop grid

  // on desktop screens small and medium grid class names span full width (to match block level element behaviour)
  %grid-8-span-on-desktop {
    @media (min-width: $threshold-4-8-col) {
      grid-column: auto / span $grid-8-columns;
    }
  }

  @for $i from 1 through $grid-8-columns-small {
    .#{$grid-8-small-col-prefix}#{$i} {
      @extend %grid-8-span-on-desktop;
    }
  }

  @for $i from 1 through $grid-8-columns-medium {
    .#{$grid-8-medium-col-prefix}#{$i} {
      @extend %grid-8-span-on-desktop;
    }
  }

  // col-X class names define grid on large/desktop screens
  @media (min-width: $threshold-4-8-col) {
    @for $i from $grid-8-columns through 1 {
      // set col-* to span respective number of columns on desktop
      .#{$grid-8-large-col-prefix}#{$i} {
        // on smaller screens let them display full width one under another
        @include vf-grid-8-column($i);
      }
    }
  }

  // column reordering
  $offsets: (
    (small, 0, $threshold-4-small-4-med-col, $grid-8-columns-small),
    (medium, $threshold-4-small-4-med-col, $threshold-4-8-col, $grid-8-columns-medium),
    (large, $threshold-4-8-col, false, $grid-8-columns)
  );

  @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
    @if $breakpoint-min == 0 {
      @include vf-grid-8-column-reordering($label, $col-count);
    } @else {
      @media (min-width: #{$breakpoint-min}) {
        @include vf-grid-8-column-reordering($label, $col-count);
      }
    }

    @if $breakpoint-reset {
      @media (min-width: #{$breakpoint-reset}) {
        @include vf-grid-8-column-reordering($label, $col-count, $reset: true);
      }
    }
  }

  // Common grid patterns
  $col-50-medium: calc($grid-8-columns-medium / 2);

  $col-25: calc($grid-8-columns / 4);
  $col-25-medium: calc($grid-8-columns-medium / 4);
  $col-50: calc($grid-8-columns / 2);
  $col-75: calc(($grid-8-columns / 4) * 3);
  $col-75-medium: calc(($grid-8-columns-medium / 4) * 3);

  // 50/50 split on medium and large screens
  .grid-row--50-50 {
    @extend %vf-grid-row;

    > .grid-col {
      @include vf-grid-8-column($grid-8-columns-small);

      @media (min-width: $threshold-4-small-4-med-col) {
        @include vf-grid-8-column($col-50-medium);
      }

      @media (min-width: $threshold-4-8-col) {
        @include vf-grid-8-column($col-50);
      }
    }
  }

  // 25/75 split on medium and large screens
  .grid-row--25-75 {
    @extend %vf-grid-row;

    > .grid-col {
      @include vf-grid-8-column($grid-8-columns-small);

      @media (min-width: $threshold-4-small-4-med-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-25-medium);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-75-medium);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-8-column($grid-8-columns-medium);
        }
      }

      @media (min-width: $threshold-4-8-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-25);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-75);
        }

        // if there is only one column we offset it to the right
        &:only-of-type {
          grid-column-start: calc($col-25 + 1);
          @include vf-grid-8-column($col-75);
        }
      }
    }
  }

  // 50/50 split just on medium screens
  .grid-row--50-50-on-medium {
    @extend %vf-grid-row;

    > .grid-col {
      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
        @include vf-grid-8-column($col-50-medium);
      }
    }
  }

  .grid-row--25-75-on-medium {
    @extend %vf-grid-row;

    > .grid-col {
      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-25-medium);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-75-medium);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-8-column($grid-8-columns-medium);
        }
      }
    }
  }

  // 50/50 split just on large screens
  .grid-row--50-50-on-large {
    @extend %vf-grid-row;

    > .grid-col {
      @media (min-width: $threshold-4-8-col) {
        @include vf-grid-8-column($col-50);
      }
    }
  }

  .grid-row--25-75-on-large {
    @extend %vf-grid-row;

    > .grid-col {
      @media (min-width: $threshold-4-8-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-25);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-75);
        }

        // if there is only one column we offset it to the right
        &:only-of-type {
          grid-column-start: calc($col-25 + 1);
          @include vf-grid-8-column($col-75);
        }
      }
    }
  }

  // 75/25 split on medium and large screens
  .grid-row--75-25 {
    @extend %vf-grid-row;

    > .grid-col {
      @include vf-grid-8-column($grid-8-columns-small);

      @media (min-width: $threshold-4-small-4-med-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-75-medium);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-25-medium);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-8-column($grid-8-columns-medium);
        }
      }

      @media (min-width: $threshold-4-8-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-75);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-25);
        }
      }
    }
  }

  .grid-row--75-25-on-medium {
    @extend %vf-grid-row;

    > .grid-col {
      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-75-medium);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-25-medium);
        }

        // if there is only one column, use the whole width
        &:only-of-type {
          @include vf-grid-8-column($grid-8-columns-medium);
        }
      }
    }
  }

  .grid-row--75-25-on-large {
    @extend %vf-grid-row;

    > .grid-col {
      @media (min-width: $threshold-4-8-col) {
        &:nth-of-type(1) {
          @include vf-grid-8-column($col-75);
        }

        &:nth-of-type(2) {
          @include vf-grid-8-column($col-25);
        }
      }
    }
  }

  .grid-row--25-25-50 {
    @extend %vf-grid-row;

    > .grid-col {
      @include vf-grid-8-column($grid-8-columns-small);

      @media (min-width: $threshold-4-small-4-med-col) {
        // The first two columns are 50% each on medium
        &:nth-of-type(-n + 2) {
          @include vf-grid-8-column($col-50-medium);
        }

        // The third column is 100% on medium
        &:nth-of-type(3) {
          @include vf-grid-8-column($grid-8-columns-medium);
        }
      }

      @media (min-width: $threshold-4-8-col) {
        &:nth-of-type(1),
        &:nth-of-type(2) {
          @include vf-grid-8-column($col-25);
        }

        &:nth-of-type(3) {
          @include vf-grid-8-column($col-50);
        }
      }
    }
  }

  .grid-row--25-25-25-25 {
    @extend %vf-grid-row;

    > .grid-col {
      @include vf-grid-8-column($grid-8-columns-small);

      @media (min-width: $threshold-4-small-4-med-col) {
        @include vf-grid-8-column($col-50-medium);
      }

      @media (min-width: $threshold-4-8-col) {
        @include vf-grid-8-column($col-25);
      }
    }
  }
}
